import React,{ Component } from 'react'
import { NavBar, Icon } from 'antd-mobile';
import List from './List'
import './index.css'
import {NavLink,Route} from 'react-router-dom'
import { getCategroyDetailList,getMinor } from '../../api'

class CategroyDetail extends Component{
    constructor(props){
        super(props)
        this.state = {
             dList:[],
             minorList: [],
             type: ['hot','new','repulation','over','month'],
             gender: props.location.state.gender.toString(),
             major: props.location.state.major.toString()
        }            
    }
    componentWillUnmount() {
        this.setState = (state, callback) => {
          return
        }
      }
    componentDidMount(){
        const {gender,major} = this.state

         //   获取书本列表
        getCategroyDetailList(gender,major)
        .then(         
            res => this.setState( ()=>({               
                dList: res.data.books                
            }))
        )

        // 获取小类别
        getMinor().then(          
            res=> this.setState( ()=>({
                minorList: res.data[this.state.gender]            
            }))            
        )        
    }
    // 返回
    go(){ 
        this.props.history.go(-1)
    }

    render(){
        return (
            <div className = 'categroydetail-box'>
                 <NavBar
                    mode="light"
                    icon={<Icon type="left" onClick={ this.go.bind(this)}/>}                  
                    rightContent={[
                        <Icon key="0" type="search" style={{ marginRight: '16px' }} />                      
                    ]}
                    >{this.props.location.state.major.toString()}</NavBar>

                    {/* 类别菜单 */}
                    <div className='menuBox'>
                    <div  className='menu'>                   
                        { this.state.type.map( (item,index) =>{
                                return (
                                <span key={index}>
                                    <NavLink to='/categroy/detail/list'>
                                        {item === 'hot'?'热门': ''}
                                        {item === 'new'?'新书': ''}
                                        {item === 'repulation'?'好评': ''}
                                        {item === 'over'?'完结': ''} 
                                        {item === 'month'?'包月': ''} 
                                    </NavLink>
                                </span>)
                            })                        
                        }
                     </div>
                    </div>
                    <main>  
                        {/* 书本列表 */}
                        {this.state.dList.map( (item,index) => {                           
                            return (                                                                         
                                    <List key={index}
                                        id={item._id} 
                                        cover = {item.cover}
                                        title={item.title}
                                        author={item.author}
                                        shortIntro={item.shortIntro}
                                        majorCate = {item.majorCate}
                                        latelyFollower = {item.latelyFollower}
                                        retentionRatio =  {item.retentionRatio}
                                    />                                         
                            )
                        })} 
                    </main>           
                             
            </div>   
        )           
    }
}
export default  CategroyDetail